<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用props向组件传递数据</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <style>
        span{
            cursor: pointer;
        }
    </style>
</head>

<body>

    <div id="app">
        <ul>
            <taxon :tree="living" taxon="living"></taxon>
        </ul>
    </div>



    <script>
        Vue.component('taxon', {
            template: `
            <li>
            <div @click="toggle">
            {{taxon}}
            <span v-if="hasChildren">[{{open ? '-' : '+'}}]</span>
            </div>
            <ul v-show="open">
            <taxon
            v-for="(child, taxon) in tree" 
            :tree="child" :taxon="taxon" :key="taxon">
            </taxon>
            </ul>
            </li>`,
            props: {
                tree: Object,
                taxon: String
            },
            data() {
                return {
                    open: false
                }
            },
            computed: {
                hasChildren() {
                    return this.tree !== null;
                }
            },
            methods: {
                toggle() {
                    this.open = !this.open
                }
            }
        });

        new Vue({
            el: '#app',
            data: {
                living: {
                    animals: {
                        invertebrates: {
                            crab: null,
                            bee: null,
                            ant: null
                        },
                        vertebrates: {
                            fish: {
                                shark: null
                            },
                            mammals: {
                                rabbit: null,
                                rat: null
                            }
                        }
                    },
                    plants: {
                        flowering: {
                            maize: null,
                            paddy: null
                        },
                        'non-flowering': {
                            algae: {
                                seaweed: null,
                                spirogyra: null
                            },
                            fungi: {
                                yeast: null,
                                mushroom: null
                            },
                            moss: null,
                            fern: null
                        }
                    }
                }
            }
        })
    </script>

</body>

</html>